<template>
  <div class="tag-filter">
    <h3 class="filter-title">常用标签：</h3>
    <div class="tags">
      <button
        v-for="tag in tags"
        :key="tag"
        class="tag-button"
        :class="{ active: tag === selectedTag }"
        @click="selectTag(tag)"
      >
        {{ tag }}
      </button>
    </div>
  </div>
</template>

<script setup>
defineProps({
  tags: {
    type: Array,
    default: () => ['全部', '前端', '后端', 'Vue', 'React']
  },
  selectedTag: {
    type: String,
    default: '全部'
  }
});

const emit = defineEmits(['update:selectedTag']);

const selectTag = (tag) => {
  emit('update:selectedTag', tag);
};
</script>

<style scoped>
.tag-filter {
  margin-bottom: 30px;
  padding: 20px;
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
}

.filter-title {
  margin: 0 0 15px 0;
  color: #333;
  font-size: 16px;
}

.tags {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.tag-button {
  padding: 8px 16px;
  border: 1px solid #e0e0e0;
  border-radius: 20px;
  background: #f8f9fa;
  color: #666;
  cursor: pointer;
  transition: all 0.2s ease;
}

.tag-button:hover {
  background: #e9ecef;
}

.tag-button.active {
  background: #3498db;
  color: white;
  border-color: #3498db;
}

@media (max-width: 768px) {
  .tag-filter {
    padding: 15px;
  }

  .tag-button {
    padding: 6px 12px;
    font-size: 14px;
  }
}
</style>